import { View } from '@tarojs/components';
import { Avatar, Button, Image } from '@taroify/core';
import { Cross, Sign } from '@taroify/icons';
import Taro, { useLoad } from '@tarojs/taro';
import { useState } from 'react';
import { getUser, reloadUserInfo } from '@/utils/auth';
import upload from '@/api/upload';
import { UserType } from '@/types';
import {
  chooseImg,
  copy,
  getGender,
  isValidEmail,
  isValidPhone,
} from '@/utils';
import { InputListProps } from '@/types/props';
import EditList from '@/components/user/EditList';
import { updateUserInfoApi } from '@/api';
import NavBar from '@/components/menus/NavBar';

export default () => {
  const [user, setUser] = useState<UserType>(getUser());
  const [flag, setFlag] = useState(false);
  const [avatar, setAvatar] = useState(false);
  const [loading, setLoading] = useState(false);
  useLoad(() => setUser(getUser()));
  async function uploadImage(key) {
    setAvatar(true);
    const res = await chooseImg();
    setKey(key, res);
  }
  function setKey(key: string, value) {
    setUser(prevUser => ({ ...prevUser, [key]: value }));
    setFlag(true);
    console.log(key, value);
  }

  const infoOpt: Array<InputListProps> = [
    {
      label: '邮箱',
      value: user?.email,
      setValue(v) {
        setKey('email', v);
        console.log(v);
      },
      verify: isValidEmail,
      errMsg: '请输入有效的邮箱地址',
    },
    {
      label: '手机号',
      value: user?.phone,
      setValue(v) {
        setKey('phone', v);
      },
      verify: isValidPhone,
      errMsg: '请输入有效的手机号',
    },
    {
      label: '性别',
      value: getGender(user.sex ?? 3),
      setValue(v) {
        if (Array.isArray(v)) setKey('sex', v[0]);
        else setKey('sex', v);
      },
      popup: 'picker',
      columns: [
        {
          label: '未知',
          value: '2',
        },
        {
          label: '男',
          value: '0',
        },
        {
          label: '女',
          value: '1',
        },
      ],
      defaultValue: user.sex,
    },
    {
      label: '简介',
      value: user.signature,
      setValue(v) {
        setKey('signature', v);
      },
      maxValue: 800,
      align: 'start',
    },
  ];
  const avatarOpt: Array<InputListProps> = [
    {
      label: '头像',
      value: <Avatar src={user?.avatar} size="large" />,
      rightHandler() {
        uploadImage('avatar');
      },
    },
    {
      label: '昵称',
      value: user?.username,
      setValue(v) {
        setKey('username', v);
      },
    },
    {
      label: 'ID',
      value: (
        <View className="flex items-center">
          {user.kid}
          <Sign size={20} />
        </View>
      ),
      rightHandler() {
        copy(user?.kid);
      },
      edit: true,
    },
  ];
  const otherOpt: Array<InputListProps> = [
    {
      label: '专业',
      value: user.majorName,
      setValue(v) {
        setKey('majorName', v);
      },
      popup: 'picker',
    },
    {
      label: '年级',
      value: user.gender,
      setValue(v) {
        setKey('gender', v);
      },
      popup: 'picker',
    },
    {
      label: '学院名称',
      value: user.schoolName,
      setValue(v) {
        setKey('schoolName', v);
      },
      popup: 'picker',
    },
  ];
  async function save() {
    setLoading(true);
    avatar && setKey('avatar', await upload(user.avatar));
    updateUserInfoApi(user)
      .then(() => {
        reloadUserInfo();
        Taro.navigateBack();
      })
      .finally(() => setLoading(false));
  }
  return (
    <View>
      <NavBar>
        <View className="grid grid-cols-1 gap-6">
          <EditList options={avatarOpt} groupName="基本信息" />
          <EditList options={infoOpt} groupName="个人详情" />
          <EditList options={otherOpt} groupName="其他信息" />
          <View className="w-full flex justify-center items-center my-4">
            <Button
              className="w-11/12"
              color="primary"
              disabled={!flag && !avatar}
              loading={loading}
              onClick={save}
            >
              保存
            </Button>
          </View>
        </View>
      </NavBar>
    </View>
  );
};
